<template>
<!--pages/activity/take_change/take_change.wxml-->
<view class="container">
  <view class="title">
    请输入提货劵劵号以及密码：
  </view>
  <form @submit="checkData">
    <input type="text" name="mixture_ticket_code" placeholder="请输入提货劵劵号" class="topput" @blur="getChangePackge"></input>
    <input password name="password" placeholder="请输入提货劵密码" class="topput"></input>
    <button class="upbtn" form-type="submit"> 提交兑换 </button>
  </form>
  <view v-for="(item, index) in goodsList" :key="index" class="itembox">
    <navigator class="item">
      <image :src="url + item.original_img"></image>
      <view class="rightbox">
        <em v-if="item.key_name">{{item.goods_name + item.key_name}}</em>
        <em v-if="!item.key_name">{{item.goods_name}}</em>
      </view>
    </navigator> 
  </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;

export default {
  data() {
    return {
      url: setting.url,
      goodsList: ''
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getChangePackge: function (e) {
      var that = this;
      var mixture_ticket_code = e.detail.value;
      console.log(mixture_ticket_code);
      request.post('/api/PickTicket/ajaxChangePackge?mixture_ticket_code=' + mixture_ticket_code, {
        isShowLoading: false,
        success: function (res) {
          that.setData({
            goodsList: res.data.result.goods_list
          });
        }
      });
    },
    checkData: function (e) {
      console.log(e.detail.value);
      var mixture_ticket_code = e.detail.value.mixture_ticket_code;
      var password = e.detail.value.password;
      var that = this;
      var tmp_url = "/api/PickTicket/checkData?mixture_ticket_code=" + mixture_ticket_code + "&password=" + password;
      request.post(tmp_url, {
        isShowLoading: false,
        success: function (res) {
          uni.navigateTo({
            url: '/pages/activity/take_change/take_change?mixture_ticket_code=' + mixture_ticket_code
          });
        }
      });
    }
  }
};
</script>
<style>
/* pages/activity/take_change/take_change.wxss */
.title{
  font-size: 30rpx;
  line-height: 88rpx;
  color: #333;
  padding: 0 20rpx;
}
.topput{
  width: 710rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  height: 80rpx;
  border-radius: 10rpx;
  background: #fff;
  line-height: 80rpx;
  padding: 0 20rpx;
  font-size: 22rpx;
  box-sizing: border-box;
}
.upbtn{
  width: 300rpx;
  height: 72rpx;
  background: #ff6a00;
  margin: 10rpx auto;
  text-align: center;
  line-height: 72rpx;
  color: #fff;
  border-radius: 36rpx;
  font-size: 30rpx;
  margin-bottom: 60rpx;
}
.itembox{
  width: 100%;
}
.itembox .item{
  width: 710rpx;
  height: 190rpx;
  border-radius: 10rpx;
  background: #fff;
  margin: 0 auto;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}
.itembox .item image{
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
  float: left;
}
.itembox .item .rightbox{
  width: 480rpx;
  height: 150rpx;
  float: left;
  margin-left: 30rpx;
  position: relative;
}
.itembox .item .rightbox em{
  width: 100%;
  line-height: 1.5em;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
  left:0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 28rpx;
}
</style>